import { memo } from 'react';
import './index.less';

import IconSvg from '@/components/IconSvg';
import { useRecoilValue, useSetRecoilState } from 'recoil';
import { collapsedState, globalState } from '@/store/global';

const Hamburger = memo(() => {
  const collapsed = useRecoilValue(collapsedState);
  const setGlobalState = useSetRecoilState(globalState);
  const toggleCollapsed = () => {
    setGlobalState((prevState) => ({ ...prevState, collapsed: !prevState.collapsed }));
  };

  return (
    <div className='hamburger-container' onClick={toggleCollapsed}>
      {collapsed ? <IconSvg name='menu-unfold'></IconSvg> : <IconSvg name='menu-fold'></IconSvg>}
    </div>
  );
});

export default Hamburger;
